<template>
  <div id="tgtSearch" class="con-box">
    <v-header title="采集明细" :showDownloadBtn="false" :saveShow="false"></v-header>
    <div class="container_wrap">
      <el-container>
        <el-header height="50px">
          <span class="conditionquery">
              <el-input v-model="condition" size="mini" prefix-icon="el-icon-search" placeholder="请输入事件ID或元素内容"
                        clearable></el-input>
              <el-button type="primary" size="mini" @click="conditionquery">查询</el-button>
            </span>
        </el-header>
        <el-main>
          <el-table
              :data="tableData"
              tooltip-effect="dark"
              v-loading="tableLoading"
              style="width: 100%">
            <el-table-column
                align="center"
                header-align="center"
                prop="event_datetime"
                label="事件时间"
                :formatter="lasttimeFormatter"
                width="auto">
            </el-table-column>
            <el-table-column
                align="center"
                header-align="center"
                prop="event_id"
                label="事件id"
                width="auto">
            </el-table-column>
            <el-table-column
                align="center"
                header-align="center"
                prop="element_content"
                label="元素内容"
                width="auto">
            </el-table-column>
            <el-table-column
                align="center"
                header-align="center"
                prop="browser"
                label="浏览器类型"
                width="auto">
            </el-table-column>
            <el-table-column
                align="center"
                header-align="center"
                prop="browser_version"
                label=" 浏览器版本"
                width="auto">
            </el-table-column>
            <el-table-column
                fixed="right"
                align="center"
                header-align="center"
                label="操作">
              <template slot-scope="scope">
                <el-button @click="dialogShow(scope.row)" type="text" size="small">查看</el-button>
              </template>
            </el-table-column>
          </el-table>
          <!--分页-->
          <el-pagination
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pagesize"
              layout="total, prev, pager, next"
              :total="totalCount">
          </el-pagination>
        </el-main>
      </el-container>
    </div>
    <!--详细内容-->
    <el-dialog
        title="详细内容"
        :visible.sync="dialogVisible"
        width="700px">
      <el-row v-for="(item, key) in dialogData" :key="item.id" :gutter="8" v-if="item !== 'null'" class="detail-box">
        <el-col :span="7">{{key}}：</el-col>
        <el-col :span="17">{{item}}</el-col>
      </el-row>
      <span slot="footer" class="dialog-footer">
        <el-button type="primary" @click="dialogVisible = false">关 闭</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
  import './../common/query.styl'
  import {mixinParameterManager} from '../../../../assets/js/mixins'
  import ajax from '../../../../api/ajax/ajax'
  import {VHeader} from '../../../../components'
  import api from '../../../../api/url'

  export default{
    mixins: [mixinParameterManager],
    components: {
      VHeader
    },
    data () {
      return {
        tableLoading: true, // 表格Loading
        tableData: [], // 表格
        totalCount: 10, // 默认数据总数
        currentPage: 1, // 当前页码
        pagesize: 10, // 默认每页数据量
        condition: '', // 输入条件
        dialogVisible: false, // 弹框默认隐藏
        dialogData: {} // 每行弹框数据
      }
    },
    methods: {
    // 时间格式化
    lasttimeFormatter (row) {
      if (row.event_datetime) {
        return row.event_datetime.slice(0, 4) + '-' + row.event_datetime.slice(4, 6) + '-' + row.event_datetime.slice(6, 8) + ' ' + row.event_datetime.slice(8, 10) + ':' + row.event_datetime.slice(10, 12)
      }
    },
      dialogShow (item) {
        let dialogShowDataList = sessionStorage.getItem('commonData')
        dialogShowDataList = JSON.parse(dialogShowDataList).META_COLUME
        let keys = []
        for (let index in item) {
          if (item[index] !== 'null') {
            keys.push(index)
          }
        }
        let data = {}
        for (var i = 0; i < dialogShowDataList.length; i++) {
          if (keys.indexOf(dialogShowDataList[i].colume_name) > -1) {
            data[dialogShowDataList[i].colume_name] = dialogShowDataList[i].colume_chs
          }
        }
        let fLiterData = {}
        for (let index in data) {
          for (let dd in item) {
            if (index === dd) {
              fLiterData[data[index]] = item[dd]
            }
          }
        }
        this.dialogVisible = true
        this.dialogData = fLiterData
      },
      keyupSubmit () {
        document.onkeydown = e => {
          let _key = window.event.keyCode
          if (_key === 13) {
            this.conditionquery()
          }
        }
      },
      // 封装查询数据
      packAjax (data) {
        ajax.post(api.SELECT_BABEHAV_INFOLIST_FORPAGE, data).then((res) => {
          this.tableLoading = false
          this.tableData = []
          this.tableData = res.data.list
          this.totalCount = res.data.total
        })
      }
    },
    created () {
      this.keyupSubmit()
    }
  }
</script>
<style lang="stylus">
  #tgtSearch
    .el-dialog__body
      padding 15px 20px
  .detail-box
    .el-col
      padding 6px 0
      line-height 24px
      &:first-child
        text-align right
</style>
